Add sensitivity toggles in filter sidebar and modal #2672

dhruvkb · 2023-07-18T20:34:23Z

Fixes

Description

This PR adds toggles in the sidebar to control the fetching and blurring of sensitive content.

The next step for the project would be to link the first toggle with the search store's filter mechanism so that changing it applies the right query params in the search request, i.e. #2548

Testing Instructions

Check out the PR and run the dev server.
Enable fake_sensitive and sensitive_content flags. The former ensures there is some content to test blurring with and the latter controls the visibility of the toggles.
Search for something.
Open the filter sidebar, you should see the toggles.
The first toggle controls the fetch_sensitive feature flag. Toggle it to see the session storage value change.
The second toggle controls whether sensitive content appears blurred. Toggle it to blur/unblur the search results.

Checklist

My pull request has a descriptive title (not a vague title likeUpdate index.md).
My pull request targets the default branch of the repository (main) or a parent feature branch.
My commit messages follow best practices.
My code follows the established code style of the repository.
I added or updated tests for the changes I made (if applicable).
I added or updated documentation (if applicable).
I tried running the project locally and verified that there are no visible errors.
I ran the DAG documentation generator (if applicable).

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

…debar_toggles

github-actions · 2023-07-18T20:41:16Z

Size Change: +720 B (0%)

Total Size: 834 kB

Filename	Size	Change
`./frontend/.nuxt/dist/client/app.js`	122 kB	+379 B (0%)
`./frontend/.nuxt/dist/client/app.modern.js`	113 kB	+187 B (0%)
`./frontend/.nuxt/dist/client/commons/app.js`	90.3 kB	+35 B (0%)
`./frontend/.nuxt/dist/client/components/v-all-results-grid.js`	6.52 kB	+18 B (0%)
`./frontend/.nuxt/dist/client/components/v-all-results-grid.modern.js`	6.36 kB	+22 B (0%)
`./frontend/.nuxt/dist/client/components/v-image-cell.js`	1.96 kB	+34 B (+2%)
`./frontend/.nuxt/dist/client/components/v-image-cell.modern.js`	1.95 kB	+34 B (+2%)
`./frontend/.nuxt/dist/client/components/v-image-grid.js`	4.42 kB	+29 B (+1%)
`./frontend/.nuxt/dist/client/components/v-image-grid.modern.js`	4.3 kB	+37 B (+1%)
`./frontend/.nuxt/dist/client/components/v-sources-table.js`	14.3 kB	+45 B (0%)
`./frontend/.nuxt/dist/client/components/v-sources-table.modern.js`	14.4 kB	+44 B (0%)
`./frontend/.nuxt/dist/client/vendors/app.js`	66.6 kB	-201 B (0%)
`./frontend/.nuxt/dist/client/vendors/app.modern.js`	66.2 kB	+126 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`./frontend/.nuxt/dist/client/232.js`	272 B	0 B
`./frontend/.nuxt/dist/client/232.modern.js`	276 B	0 B
`./frontend/.nuxt/dist/client/233.js`	1.85 kB	0 B
`./frontend/.nuxt/dist/client/commons/app.modern.js`	80.8 kB	-7 B (0%)
`./frontend/.nuxt/dist/client/commons/components/v-search-grid/pages/search.js`	5.17 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/commons/components/v-search-grid/pages/search.modern.js`	5.62 kB	0 B
`./frontend/.nuxt/dist/client/components/loading-icon.js`	731 B	0 B
`./frontend/.nuxt/dist/client/components/loading-icon.modern.js`	734 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/table-sort-icon.js`	514 B	0 B
`./frontend/.nuxt/dist/client/components/table-sort-icon.modern.js`	519 B	0 B
`./frontend/.nuxt/dist/client/components/v-audio-cell.js`	572 B	0 B
`./frontend/.nuxt/dist/client/components/v-audio-cell.modern.js`	573 B	0 B
`./frontend/.nuxt/dist/client/components/v-audio-details.js`	1.79 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-audio-details.modern.js`	1.77 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-audio-track-skeleton.js`	958 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-audio-track-skeleton.modern.js`	961 B	0 B
`./frontend/.nuxt/dist/client/components/v-audio-track.js`	5.39 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-audio-track.modern.js`	5.34 kB	-4 B (0%)
`./frontend/.nuxt/dist/client/components/v-back-to-search-results-link.js`	635 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-back-to-search-results-link.modern.js`	642 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-bone.js`	632 B	0 B
`./frontend/.nuxt/dist/client/components/v-bone.modern.js`	636 B	0 B
`./frontend/.nuxt/dist/client/components/v-box-layout.js`	1.33 kB	0 B
`./frontend/.nuxt/dist/client/components/v-box-layout.modern.js`	1.34 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-link.js`	1.06 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-link.modern.js`	1.06 kB	0 B
`./frontend/.nuxt/dist/client/components/v-content-page.js`	530 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-page.modern.js`	535 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-report-button.js`	491 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-report-button.modern.js`	496 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-report-form.js`	3.33 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-report-form.modern.js`	3.21 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-report-popover.js`	3.79 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-content-report-popover.modern.js`	3.67 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-copy-button.js`	3.99 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-copy-button.modern.js`	4 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-copy-license.js`	2.28 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-copy-license.modern.js`	2.25 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-dmca-notice.js`	792 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-dmca-notice.modern.js`	796 B	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-error-image.js`	2.41 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-error-image.modern.js`	2.38 kB	+3 B (0%)
`./frontend/.nuxt/dist/client/components/v-error-section.js`	372 B	0 B
`./frontend/.nuxt/dist/client/components/v-error-section.modern.js`	376 B	0 B
`./frontend/.nuxt/dist/client/components/v-external-search-form.js`	2 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-external-search-form.modern.js`	1.98 kB	+2 B (0%)
`./frontend/.nuxt/dist/client/components/v-external-source-list.js`	894 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-external-source-list.modern.js`	895 B	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-full-layout.js`	1.57 kB	0 B
`./frontend/.nuxt/dist/client/components/v-full-layout.modern.js`	1.57 kB	-3 B (0%)
`./frontend/.nuxt/dist/client/components/v-grid-skeleton.js`	1.53 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-grid-skeleton.modern.js`	1.54 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-home-gallery.js`	4.28 kB	+2 B (0%)
`./frontend/.nuxt/dist/client/components/v-home-gallery.modern.js`	4.26 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-homepage-content.js`	1.8 kB	-4 B (0%)
`./frontend/.nuxt/dist/client/components/v-homepage-content.modern.js`	1.77 kB	0 B
`./frontend/.nuxt/dist/client/components/v-image-details.js`	1.44 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-image-details.modern.js`	1.43 kB	0 B
`./frontend/.nuxt/dist/client/components/v-license-tab-panel.js`	642 B	0 B
`./frontend/.nuxt/dist/client/components/v-license-tab-panel.modern.js`	649 B	0 B
`./frontend/.nuxt/dist/client/components/v-load-more.js`	1.18 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-load-more.modern.js`	1.07 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-media-license.js`	932 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-media-license.modern.js`	938 B	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-media-reuse.js`	2.93 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-media-reuse.modern.js`	2.91 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-media-tag.js`	417 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-media-tag.modern.js`	420 B	0 B
`./frontend/.nuxt/dist/client/components/v-modal.js`	1.01 kB	0 B
`./frontend/.nuxt/dist/client/components/v-modal.modern.js`	995 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-no-results.js`	854 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-no-results.modern.js`	856 B	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-radio.js`	1 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-radio.modern.js`	1.01 kB	0 B
`./frontend/.nuxt/dist/client/components/v-related-audio.js`	1.73 kB	-3 B (0%)
`./frontend/.nuxt/dist/client/components/v-related-audio.modern.js`	1.64 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-related-images.js`	806 B	+2 B (0%)
`./frontend/.nuxt/dist/client/components/v-related-images.modern.js`	719 B	+1 B (0%)
`./frontend/.nuxt/dist/client/components/v-report-desc-form.js`	976 B	0 B
`./frontend/.nuxt/dist/client/components/v-report-desc-form.modern.js`	980 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-row-layout.js`	1.74 kB	+7 B (0%)
`./frontend/.nuxt/dist/client/components/v-row-layout.modern.js`	1.74 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-scroll-button.js`	891 B	0 B
`./frontend/.nuxt/dist/client/components/v-scroll-button.modern.js`	891 B	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-search-grid.js`	6.81 kB	-6 B (0%)
`./frontend/.nuxt/dist/client/components/v-search-grid.modern.js`	6.17 kB	-3 B (0%)
`./frontend/.nuxt/dist/client/components/v-search-results-title.js`	617 B	0 B
`./frontend/.nuxt/dist/client/components/v-search-results-title.modern.js`	621 B	0 B
`./frontend/.nuxt/dist/client/components/v-server-timeout.js`	298 B	0 B
`./frontend/.nuxt/dist/client/components/v-server-timeout.modern.js`	303 B	0 B
`./frontend/.nuxt/dist/client/components/v-sketch-fab-viewer.js`	1.01 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-sketch-fab-viewer.modern.js`	915 B	0 B
`./frontend/.nuxt/dist/client/components/v-snackbar.js`	1.06 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/components/v-snackbar.modern.js`	1.06 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/components/v-warning-suppressor.js`	306 B	0 B
`./frontend/.nuxt/dist/client/components/v-warning-suppressor.modern.js`	311 B	0 B
`./frontend/.nuxt/dist/client/pages/about.js`	1.42 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/pages/about.modern.js`	1.42 kB	0 B
`./frontend/.nuxt/dist/client/pages/audio/_id/index.js`	6.72 kB	-4 B (0%)
`./frontend/.nuxt/dist/client/pages/audio/_id/index.modern.js`	6.57 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/pages/feedback.js`	1.36 kB	0 B
`./frontend/.nuxt/dist/client/pages/feedback.modern.js`	1.36 kB	0 B
`./frontend/.nuxt/dist/client/pages/image/_id/index.js`	7.03 kB	-4 B (0%)
`./frontend/.nuxt/dist/client/pages/image/_id/index.modern.js`	6.86 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/pages/image/_id/report.js`	4.89 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/pages/image/_id/report.modern.js`	4.67 kB	-4 B (0%)
`./frontend/.nuxt/dist/client/pages/index.js`	6.36 kB	0 B
`./frontend/.nuxt/dist/client/pages/index.modern.js`	6.32 kB	-5 B (0%)
`./frontend/.nuxt/dist/client/pages/preferences.js`	1.32 kB	0 B
`./frontend/.nuxt/dist/client/pages/preferences.modern.js`	1.31 kB	-3 B (0%)
`./frontend/.nuxt/dist/client/pages/privacy.js`	1.26 kB	0 B
`./frontend/.nuxt/dist/client/pages/privacy.modern.js`	1.26 kB	0 B
`./frontend/.nuxt/dist/client/pages/search-help.js`	1.62 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/pages/search-help.modern.js`	1.61 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/pages/search.js`	2.26 kB	0 B
`./frontend/.nuxt/dist/client/pages/search.modern.js`	2.05 kB	-1 B (0%)
`./frontend/.nuxt/dist/client/pages/search/audio.js`	4.1 kB	-5 B (0%)
`./frontend/.nuxt/dist/client/pages/search/audio.modern.js`	3.98 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/pages/search/image.js`	544 B	0 B
`./frontend/.nuxt/dist/client/pages/search/image.modern.js`	550 B	-1 B (0%)
`./frontend/.nuxt/dist/client/pages/search/index.js`	441 B	0 B
`./frontend/.nuxt/dist/client/pages/search/index.modern.js`	447 B	0 B
`./frontend/.nuxt/dist/client/pages/search/model-3d.js`	242 B	-1 B (0%)
`./frontend/.nuxt/dist/client/pages/search/model-3d.modern.js`	246 B	-1 B (0%)
`./frontend/.nuxt/dist/client/pages/search/search-page.types.js`	265 B	0 B
`./frontend/.nuxt/dist/client/pages/search/search-page.types.modern.js`	271 B	0 B
`./frontend/.nuxt/dist/client/pages/search/video.js`	240 B	0 B
`./frontend/.nuxt/dist/client/pages/search/video.modern.js`	244 B	0 B
`./frontend/.nuxt/dist/client/pages/sources.js`	1.53 kB	-2 B (0%)
`./frontend/.nuxt/dist/client/pages/sources.modern.js`	1.54 kB	+1 B (0%)
`./frontend/.nuxt/dist/client/runtime.js`	2.69 kB	0 B
`./frontend/.nuxt/dist/client/runtime.modern.js`	2.69 kB	0 B

_{compressed-size-action}

frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue

frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue

frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue

zackkrida

I found one typo which concerns accessibility but otherwise LGTM. This is awesome!

AetherUnbound

This looks great and works as-expected locally! I have a few mostly questions, one comment on phrasing but nothing to block a merge 🚀

frontend/src/components/VFilters/VSearchGridFilter.vue

frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue

frontend/src/locales/scripts/en.json5

Co-authored-by: Zack Krida <[email protected]>

github-actions · 2023-07-19T08:10:02Z

Full-stack documentation: https://docs.openverse.org/_preview/2672

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

dhruvkb added 12 commits July 13, 2023 12:38

Store blurring state in UI store

5b8601d

Blur sensitive audio and image results

0b3a825

Ensure image is blurred and does not leak sensitive content

a2a672f

Ensure audio is blurred and does not leak sensitive content

6906d69

Use blur radii specified in designs

b68a5e3

Merge branch 'main' of https://github.com/WordPress/openverse into si…

e8417f2

…debar_toggles

Add transition to blur/unblur state change

4b8ae14

Make disabled text lighter to match mockups

1374a4d

Create sidebar toggles component and story

fc53b52

Remove dead code for 'close' event

7a5bea6

Add safe browsing section next to filters

4001a2b

Merge branch 'main' of https://github.com/WordPress/openverse into si…

e14c7e2

…debar_toggles

dhruvkb requested a review from a team as a code owner July 18, 2023 20:34

dhruvkb requested review from AetherUnbound and obulat July 18, 2023 20:34

dhruvkb added this to the Frontend blurring of sensitive content milestone Jul 18, 2023

github-actions bot added 🧱 stack: documentation Related to Sphinx documentation 🧱 stack: frontend Related to the Nuxt frontend labels Jul 18, 2023

openverse-bot added 🟨 priority: medium Not blocking but should be addressed soon 🌟 goal: addition Addition of new feature 🕹 aspect: interface Concerns end-users' experience with the software labels Jul 18, 2023

zackkrida reviewed Jul 18, 2023

View reviewed changes

frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue Show resolved Hide resolved

zackkrida reviewed Jul 18, 2023

View reviewed changes

frontend/src/components/VHeader/VHeaderMobile/VContentSettingsModalContent.vue Show resolved Hide resolved

zackkrida reviewed Jul 18, 2023

View reviewed changes

frontend/src/components/VSafeBrowsing/VSafeBrowsing.vue Outdated Show resolved Hide resolved

zackkrida approved these changes Jul 18, 2023

View reviewed changes

AetherUnbound approved these changes Jul 18, 2023

View reviewed changes

dhruvkb and others added 3 commits July 19, 2023 07:55

Update id to match aria-labelledby

d4193cf

Co-authored-by: Zack Krida <[email protected]>

Link to existing issue in // TODO comment

63c2167

Update i18n strings

543d2b9

Update screenshots with lighter disabled text

7c3b5db

dhruvkb merged commit 80af08e into main Jul 19, 2023
41 checks passed

dhruvkb deleted the sidebar_toggles branch July 19, 2023 08:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add sensitivity toggles in filter sidebar and modal #2672

Add sensitivity toggles in filter sidebar and modal #2672

dhruvkb commented Jul 18, 2023 •

edited by AetherUnbound

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

zackkrida left a comment •

edited

Loading

AetherUnbound left a comment

github-actions bot commented Jul 19, 2023

Add sensitivity toggles in filter sidebar and modal #2672

Add sensitivity toggles in filter sidebar and modal #2672

Conversation

dhruvkb commented Jul 18, 2023 • edited by AetherUnbound Loading

Fixes

Description

Testing Instructions

Checklist

Developer Certificate of Origin

github-actions bot commented Jul 18, 2023 • edited Loading

zackkrida left a comment • edited Loading

Choose a reason for hiding this comment

AetherUnbound left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 19, 2023

dhruvkb commented Jul 18, 2023 •

edited by AetherUnbound

Loading

github-actions bot commented Jul 18, 2023 •

edited

Loading

zackkrida left a comment •

edited

Loading